<template>
    <div>
        <slider :img="list"></slider>
        <h4>{{info.title}}</h4>

        <p>
            <span>{{info.market_price}}</span>
            <s>{{info.sell_price}}</s>

        <div class="shopping">
            <mt-button type="primary">点击购买</mt-button>
            <inputNum @postNum="getNum"></inputNum>
            <br/>
            <transition @beforeEnter="beforeEnter"
                        @enter="enter"
                        @afterEnter="afterEnter"
                    >
                <div class="ball" v-show="isshow"></div>
            </transition>
            <mt-button type="danger" style="margin-top: 10px" @click="postNum">加入购物车</mt-button>
        </div>
        </p>

        <div style="margin: 10px 0">
            <div>上架时间：{{info.add_time | forTime("YYYY-MM-DD")}}</div>
            <div>质量安全证书：{{info.goods_no}}</div>
        </div>
        <div>
            <router-link v-bind="{to:'/goods/getdesc/'+ id}">
                <mt-button type="primary" size="large">图文详情</mt-button>
            </router-link>

            <br/>
            <mt-button type="danger" size="large">点击评论</mt-button>
        </div>

    </div>
</template>

<script type='es6'>
    import inputNum from './../account/inputNum.vue'
    import slider from './../account/slider.vue'

    import vm from './../account/base.js'
    import {getItem,setItem,gaibian} from './../account/localstorage.js'


    export default {
        components: {
            slider,
            inputNum
        },
        data(){

            return {
                isshow: false,
                id: '',
                list: [],
                info: {},
                num: 1
            }
        },
        created(){
            this.id = this.$route.params.id
            this.getData()
            this.getInfo()

        },
        methods: {
            getData(){
                var url = 'http://vue.studyit.io/api/getthumimages/' + this.id
                this.$http.get(url).then(function (data) {
                    // console.log(data);
                    var a = data.body.message
                    a.forEach(function (e) {
                        e.img = e.src
                    })
                    this.list = a
                })
            },
            getInfo(){
                var url = 'http://vue.studyit.io/api/goods/getinfo/' + this.id
                this.$http.get(url).then(function (data) {
                    //console.log(data);
                    this.info = data.body.message[0]
                })
            },
            getNum(count){
                this.num = count
            },
            postNum(){
                vm.$emit("count", this.num)
                setItem({goodsId: this.id, goodsNum: this.num})
                this.isshow = true
            },
            beforeEnter(el){
                el.style.transform = "translate(30px,-50px)"
            },
            enter(el,done){
                el.offsetHeight
                el.style.transform = "translate(200px,250px)"
                done()
            },
            afterEnter(el){
                this.isshow = !this.isshow
            }
        }

    }
</script>

<style scoped>
    .shopping {
        position: relative;
    }

    .ball {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: red;
        z-index: 100;
        left: 50px;
        top: 30px;
        transition: all .4s ease;
    }

</style>  